<template>
    <div :style="getContentStyle(data.cssStyle)" :class="getCssName(data)" class="app-carouse">
       <el-carousel :autoplay="swipeConfig.isAuto" :interval="swipeConfig.timeSpan" >
            <el-carousel-item v-for="(item, index) in swipeData" :key="index">
                <img
                    class="app-carouse-img"
                    v-if="getImagePath(item)"
                    :src="getImagePath(item)"
                    @click="click(item)"
                    @error="imgError"
                />
                <i v-else :class="getImageClass(item)"></i>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({})
export default class AppCarousel extends Vue {
    /**
     * @description 轮播图数据
     * @param {*}
     */
    @Prop()
    data: any;

    /**
     * @description 轮播图图片所有项数据
     */

    public swipeData: any[] = [];

    /**
     * @description 轮播图配置
     */
    public swipeConfig: any = {};

    /**
     * data值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppCarousel
     */
    @Watch('data', { immediate: true })
    public onDataChange(newVal: any, oldVal: any) {
        if (newVal && !Object.is(newVal, oldVal) && newVal.getPSRawItemParams) {
            const imgsData = newVal.getPSRawItemParams;
            this.swipeData = imgsData.slice(0, -2);
            this.setSwipeConfig(imgsData.slice(-2));
        }
    }

    /**
     * @description 设置轮播图配置
     */
    public setSwipeConfig(data: any) {
        const autoPlay: any =data.find((item: any) => Object.is(item.key, 'autoplay')) || {};
        const timeSpan: any = data.find((item: any) => Object.is(item.key, 'timespan')) || {};
        this.swipeConfig = {
            isAuto: Object.is(autoPlay?.value, '1') ? true : false,
            timeSpan: Number(timeSpan?.value) || 0,
        };
    }

    /**
     * @description 获取cssName
     * @param {*} data
     */
    public getCssName(data: any) {
        if (data && data.getPSSysCss && data.getPSSysCss.cssName) {
            return data.getPSSysCss.cssName;
        }
    }

    /**
     * @description 获取ImagePath
     * @param {*} data
     */
    public getImagePath(item: any) {
        if (item && item.getPSSysImage && item.getPSSysImage.imagePath) {
            return item.getPSSysImage.imagePath;
        }
    }

    /**
     * @description 获取imageClass
     * @param {*} data
     */
    public getImageClass(item: any) {
        if (item && item.getPSSysImage && item.getPSSysImage.imageClass) {
            return item.getPSSysImage.imageClass;
        }
    }

    /**
     * @description 重定img src
     * @param {*} event
     */
    imgError($event: any) {
        let img = $event.srcElement;
        if(img&&!img.imgSign){
            img.src = 'assets/img/404.png';
            img.imgSign=true
        }
        img.onerror = null; //控制不要一直跳动
    }

    /**
     * @description 点击事件抛出
     * @param {*} data
     */
    click(data: any) {
        this.$emit('item-click', data);
    }

    /**
     * @description 获取内容样式
     * @param {*} data
     * @return {*}
     */
    getContentStyle(data: any) {
        if (data && data.cssStyle) {
            const res = data.cssStyle.split('\n');
            const target: string[] = [];
            res.forEach((item: any) => {
                target.push(...item.split(';').filter((value: any) => value));
            });
            return target
                .filter((value: string) => {
                    return value.split(':').length === 2;
                })
                .join(';');
        }
    }
}
</script>

<style lang='less'>
@import './app-carousel.less';
</style>